<route>
  {
      meta: {
          layout: 'index',
          title:'首页'
      }
  }  
  </route>
  <template>
    <view>
      <a-row :gutter="24">
        <a-col :span="24" :lg="12" :xl="6" class="mb-24">
          <CountCard :title="123" :value="456">
            
          </CountCard>
        </a-col>
        <a-col :span="24" :lg="12" :xl="6" class="mb-24">
          <CountCard></CountCard>
        </a-col>
      </a-row>
  
      <ProfileHead></ProfileHead>
      <profileProject></profileProject>
  
      <a-row :gutter="24" type="flex" align="stretch">
        <a-col :span="24" :lg="10" class="mb-24">
          <!-- bug -->
          <!-- <ActiveUsers></ActiveUsers> -->
        </a-col>
        <a-col :span="24" :lg="14" class="mb-24">
          <SalesOverview></SalesOverview>
        </a-col>
      </a-row>
  
      <a-row :gutter="24" type="flex" align="stretch">
        <a-col :span="24" :lg="16" class="mb-24">
          <!-- bug -->
          <ProjectCard :data="tableData" :columns="tableColumns"></ProjectCard>
        </a-col>
        <a-col :span="24" :lg="8" class="mb-24">
          <Timeline></Timeline>
        </a-col>
      </a-row>
  
      <a-row :gutter="24" type="flex" align="stretch">
        <a-col :span="24" :xl="14" class="mb-24">
          <CardInfo></CardInfo>
        </a-col>
        <a-col :span="24" :xl="10" class="mb-24">
          <LittleCard></LittleCard>
        </a-col>
      </a-row>
  
    </view>
  </template>
  <script setup>
  import {
    PieChartOutlined
  } from '@ant-design/icons-vue';
  const title = ref(null);
  
  //ProjectCard组件
  const tableColumns = [
    {
      title: 'COMPANIES',
      dataIndex: 'company',
      scopedSlots: { customRender: 'company' },
      width: 300,
    },
    {
      title: 'MEMBERS',
      dataIndex: 'members',
      scopedSlots: { customRender: 'members' },
    },
    {
      title: 'BUDGET',
      dataIndex: 'budget',
      class: 'font-bold text-muted text-sm',
    },
    {
      title: 'COMPLETION',
      scopedSlots: { customRender: 'completion' },
      dataIndex: 'completion',
    },
  ];
  const tableData = [
    {
      key: '1',
      company: {
        name: 'Soft UI Shopify Version',
        logo: 'images/logos/logo-shopify.svg',
      },
      members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-2.jpg", "images/face-3.jpg",],
      budget: '$14,000',
      completion: 60,
    },
    {
      key: '2',
      company: {
        name: 'Progress Track',
        logo: 'images/logos/logo-atlassian.svg',
      },
      members: ["images/face-4.jpg", "images/face-3.jpg",],
      budget: '$3,000',
      completion: 10,
    },
    {
      key: '3',
      company: {
        name: 'Fix Platform Errors',
        logo: 'images/logos/logo-slack.svg',
      },
      members: ["images/face-1.jpg", "images/face-2.jpg", "images/face-3.jpg",],
      budget: 'Not Set',
      completion: {
        label: '100',
        status: 'success',
        value: 100,
      },
    },
    {
      key: '4',
      company: {
        name: 'Launch new Mobile App',
        logo: 'images/logos/logo-spotify.svg',
      },
      members: ["images/face-1.jpg", "images/face-2.jpg",],
      budget: '$20,600',
      completion: {
        label: '100',
        status: 'success',
        value: 100,
      },
    },
    {
      key: '5',
      company: {
        name: 'Add the New Landing Page',
        logo: 'images/logos/logo-jira.svg',
      },
      members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-2.jpg", "images/face-3.jpg",],
      budget: '$4,000',
      completion: 80,
    },
    {
      key: '6',
      company: {
        name: 'Redesign Online Store',
        logo: 'images/logos/logo-invision.svg',
      },
      members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-3.jpg",],
      budget: '$2,000',
      completion: {
        label: 'Cancelled',
        status: 'exception',
        value: 100,
      },
    },
  ];
  </script>
  
  